<template>
  <div id="app" ref="app">
    <component :is="componentName"></component>
  </div>
</template>

<script>
import Empty from "./components/Empty.vue";
import NotIE from "./components/NotIE.vue";
import IE from "./components/IE.vue";

export default {
  name: "App",
  components: {
    Empty,
    NotIE,
    IE,
  },
  data() {
    return {
      componentName: "Empty",
    };
  },
  computed: {},
  methods: {
    isIE() {
      // ie?
      // edge浏览器中为false，ie11及以下版本为true
      if (!!window.ActiveXObject || "ActiveXObject" in window) return true;
      else return false;
    },
  },
  created() {
    // 更新页面title
    document.title = this.$i18n.messages[this.$i18n.locale].platformName;
  },
  mounted() {
    if (this.isIE()) {
      this.componentName = "IE";
      this.$refs["app"].style.background = "none";
    } else {
      this.componentName = "NotIE";
      this.$refs["app"].style.background =
        "url('https://s1.obs.idosp.cn/V3/images/login/bg_login.png')";
    }
  },
};
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#app {
  font-family: Microsoft YaHei;
  background-size: 100% 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  height: 100%;
  position: relative;
}
.el-dialog--center .el-dialog__body {
  max-height: 500px;
  overflow: auto;
}
.el-main {
  padding: 50px;
}
.el-form-item input:focus + .el-input__prefix > .el-input__icon {
  color: #409eff;
}
.el-form-item.is-error .el-input__icon {
  color: #f56c6c;
}
.el-form-item.is-error input:focus + .el-input__prefix > .el-input__icon {
  color: #f56c6c;
}
.form-control {
  width: 100%;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
.overflow-hidden {
  overflow: hidden;
}
.margin-top {
  margin-top: 20px;
}
.margin-bottom {
  margin-bottom: 20px;
}
.margin-right {
  margin-right: 20px;
}
.margin-left {
  margin-left: 20px;
}
.margin-top-2 {
  margin-top: 40px;
}
.align-center {
  text-align: center;
}
.border-bottom input {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.btn-getSMS {
  position: absolute;
  top: 0;
  right: 15px;
  display: block;
}
.subtitle {
  font-size: 14px;
  color: #606266;
}
.main-box {
  position: absolute;
  top: -30px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 1600px;
  height: 840px;
  background-color: #fff;
  border-radius: 10px;
  min-height: 200px;
}
.main-title {
  padding: 20px 50px;
  text-align: left;
}
.p-logo {
  display: inline-block;
  vertical-align: top;
  width: 60px;
  height: 40px;
  background-image: url("https://s1.obs.idosp.cn/V3/images/login/logo.png");
  background-size: 100% 100%;
  margin-right: 15px;
}
.p-name {
  display: inline-block;
  vertical-align: top;
  height: 40px;
  font-family: Source Han Serif CN;
  font-style: normal;
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
  color: #1a77e5;
}
.p-lang {
  float: right;
  margin-top: 10px;
}
.form-box {
  width: 420px;
  margin: 20px auto;
  text-align: left;
}
.iba {
  display: block;
  width: 100px;
  height: 100px;
  margin: 30px auto;
  text-align: center;
}
.qrcode-container {
  width: 320px;
  margin: auto;
}
.ll {
  width: 570px;
}
.lr {
  width: calc(100% - 570px);
}
.img-container {
  position: relative;
  top: -60px;
  width: 740px;
  height: 740px;
  margin: 0 auto;
}
@media screen and (max-width: 1640px) {
  .main-box {
    width: 1160px;
    height: 700px;
  }
  .form-box {
    width: 320px;
  }
  .qrcode-container {
    width: 220px;
    margin: auto;
  }
  .ll {
    width: 470px;
  }
  .lr {
    width: calc(100% - 470px);
  }
  .img-container {
    width: 590px;
    height: 590px;
  }
  .iba {
    margin: 20px auto;
  }
}
@media screen and (max-width: 1200px) {
  .main-box {
    width: 570px;
    height: 700px;
  }
  .ll {
    width: 100%;
  }
  .lr {
    display: none;
  }
  .iba {
    margin: 20px auto;
  }
}
@media screen and (max-height: 768px) {
  html,
  body {
    height: 768px;
  }
}
</style>
